<template>
  <view class="page">
    <view class="nav-bar">
      <view class="nav-box">
        <view
          class="btn"
          @click="goHome"
          :style="`--icon: url(${base_url + '/static/goHome.svg'});`"
        ></view>
        <view
          class="btn"
          @click="goBack"
          :style="`--icon: url(${base_url + '/static/goBack.svg'});`"
        ></view>
      </view>
    </view>
    <view class="content-scroll">
      <view class="image-container">
        <image :src="activity.imageUrl" mode="aspectFill" />
      </view>
      <view class="activity-container">
        <view class="title">{{ activity.title }}</view>
        <view class="date-info">
          <view class="left">
            <view class="date">{{ activity.date }}</view>
            <view class="duration">{{ activity.duration }}</view>
          </view>
          <view class="right">
            <view class="clock-icon">
              <image :src="`${base_url}/static/clock.svg`" mode="aspectFit" />
            </view>
          </view>
        </view>
        <view class="location-info">
          <view class="left">
            <view class="location">{{ activity.location }}</view>
          </view>
          <view class="right">
            <view class="location-icon">
              <image
                :src="`${base_url}/static/location.svg`"
                mode="aspectFit"
              />
            </view>
          </view>
        </view>
        <view class="details-container">
          <view class="details-title">活动详情：</view>
          <view class="content">{{ activity.details }}</view>
        </view>
      </view>
    </view>
    <view class="btn-container">
      <view v-show="activity.isJoin === 0" @click="joinActivity" class="tpi-btn">参与活动</view>
      <div v-show="activity.isJoin === 1" @click="cancelJoinActivity" class="tpied-btn">
        您已参加，点击取消
      </div>
    </view>
  </view>
</template>

<script setup>
import { base_url } from "../../api/config";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

import { activity as activityService } from "../../service/activity";

const activity = ref({
  title: "",
  imageUrl: null,
  date: "",
  duration: "",
  location: "",
  wantToGoCount: 0,
  isJoin: 0,
  details: "",
});

onLoad(async (options) => {
  const activityID = +options.id;

  const data = await activityService.getActivity(activityID);
  activity.value.id = data.id;
  activity.value.title = data.title;
  if (data.imageUrl) {
    if (data.imageUrl.startsWith("http")) {
      activity.value.imageUrl = data.imageUrl;
    } else {
      activity.value.imageUrl = base_url + data.imageUrl;
    }
  }
  activity.value.date = data.date;
  activity.value.duration = data.duration;
  activity.value.location = data.location;
  activity.value.wantToGoCount = data.wantToGoCount || 0;
  activity.value.isJoin = data.isJoin || 0;
  activity.value.details = data.content || "";
});

let joining = false;

const joinActivity = async () => {
  if (activity.value.isJoin === 1) {
    return;
  }
  if (joining) {
    return;
  }
  joining = true;
  const msg = await activityService.participateActivity(activity.value.id);
  if (msg === "参加活动成功") {
    activity.value.isJoin = 1;
  }
  joining = false;
};

const cancelJoinActivity = async () => {
  if (activity.value.isJoin === 0) {
    return;
  }
  if (joining) {
    return;
  }
  joining = true;
  const msg = await activityService.cancelActivityParticipation(activity.value.id);
  // console.log(result);
  if (msg === "取消活动成功") {
    activity.value.isJoin = 0;
  }
  joining = false;
};

function goHome() {
  uni.reLaunch({
    url: "/pages/main/main",
  });
}

function goBack() {
  uni.navigateBack();
}
</script>

<style scoped lang="less">
.page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(to bottom, rgb(255, 212, 168), #fff);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 10vh;
  box-sizing: border-box;

  .nav-bar {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 30vw;
    position: absolute;
    top: 10vw;
    left: 0;

    .nav-box {
      width: min-content;
      padding: 1vw;
      background-color: rgba(136, 136, 136, 0.4);
      display: flex;
      border-radius: 0 5vw 5vw 0;

      .btn {
        width: 12vw;
        height: 7vw;
        background-image: var(--icon);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }

  .content-scroll {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .image-container {
      width: 100%;
      height: 30vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .activity-container {
      --gap: 3.5vw;
      border-radius: 2vw;
      background-color: #fff;
      margin: 3vw;
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 6vw;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #d4d4d4;
        padding: var(--gap);
      }

      .date-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #d4d4d4;
        padding: var(--gap);

        .left {
          display: flex;
          flex-direction: column;
          font-size: 4vw;

          .date {
            font-size: 5vw;
            font-weight: bold;
          }

          .duration {
            font-size: 3.5vw;
            color: #666;
          }
        }

        .right {
          .clock-icon {
            width: 5vw;
            height: 5vw;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .location-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #d4d4d4;
        padding: var(--gap);

        .left {
          display: flex;
          flex-direction: column;

          .location {
            font-size: 5vw;
            font-weight: bold;
          }
        }

        .right {
          .location-icon {
            width: 6vw;
            height: 6vw;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .details-container {
        padding: var(--gap);

        .details-title {
          font-size: 5vw;
          font-weight: bold;
          color: #333;
        }

        .content {
          padding: var(--gap) 0;
        }
      }
    }
  }

  .btn-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10vh;
    padding: 5vw;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    .tpi-btn {
      padding: 3vw;
      border-radius: 5vw;
      background-color: #d4e98c;
      text-align: center;
      width: 100%;
      font-weight: bold;
    }

    .tpied-btn {
      padding: 3vw;
      border-radius: 5vw;
      background-color: #888;
      color: #fff;
      text-align: center;
      width: 100%;
      font-weight: bold;
    }
  }
}
</style>
